<template>
<div>
  <el-container>
    <el-header style="height: 350px">
      <center>
        <el-container style="width: 80%">
          <el-main>
            <div class="block" style="margin-top: -20px">
              <el-carousel height="300px">
                <el-carousel-item v-for="item in advertyList" :key="item.id">
<!--                  <h3 class="small">{{ item.pic }}</h3>-->
                  <img :src="item.pic"
                       class="image" @click="toMsg(1,item.id)">
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-main>
        </el-container>
      </center>
    </el-header>

    <el-main>
      <el-card class="box-card" v-for="list in typeList" :key="list.id" style="margin-top: 20px">
        <div slot="header" class="clearfix" style="float: left;margin-top: -80px;height: 20px">
          <span>{{ list.name }}</span>
        </div>
        <div class="text item" v-if="list.mapList!=undefined">
          <el-row>
            <el-col :span="8" v-for="item in list.mapList" :key="item.id" >
<!--              {{item.name}}-->
              <el-card :body-style="{ padding: '0px' }"
                       style="height: 300px;width:330px;margin-top: 20px;margin-right: -40px">
                <img :src="item.pic"
                     class="image" height="120px" width="20px" @click="toMsg(item.id)">
                <div style="padding: 14px;">
                  <div>
                    <span>
                      <el-link  @click="toMsg(item.id)" target="_blank" :underline="false">名称：{{item.name}}</el-link>
                    </span>
                  </div>
                  <div style="margin-top: -120px">
                    <span>
                      价格：￥{{ item.price }}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="text item" v-else>
          <center>
            暂无商品
          </center>
        </div>
      </el-card>

    </el-main>
  </el-container>

</div>
</template>

<script>
export default {
  name: "Show",
  data () {
    return {
      typeList:[],
      advertyList: [],
      proList: []
    }
  },
  created() {
    console.log(sessionStorage.getItem("token"));
    this.getProType();
    this.getAdverty();
    this.getProMsg();
  },
  methods : {
    toMsg(value){
      sessionStorage.removeItem("proId");
      sessionStorage.setItem("proId",value);
      // console.log(value)
      this.$router.push('/proMessage');
    },
    getProType(){
      this.$http.post("/front/proType/typeList").then(data => {
        console.log(data)
        this.typeList=data;
      })
    },
    getProMsg(){
      this.$http.post("/front/proType/projectList").then(data => {
        this.proList=data;
      })
    },
    getAdverty(){
      this.$http.post("/front/proType/selectAdverty").then(data => {
        console.log(data);
        this.advertyList=data;
      })
    }
  }
}
</script>

<style scoped>

.el-header{
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.time {
  font-size: 13px;
  /*color: #999;*/
}

.bottom {
  margin-top: 13px;
  /*line-height: 12px;*/
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}


</style>
